<template>
    <div class="login-div">
        <div class="box-card">
            <div class="title">
                <span>医院预约上门服务平台后台管理</span>
            </div>
            <div class="input-div">
                <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="form.username">
                </el-input>
                <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="form.password">
                </el-input>
            </div>
            <div>
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="btn-div">
                <el-button type="primary" :loading="loading" @click="login">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { setToken } from "@/utils/auth";
export default {
    name: "authorization",
    data() {
        return {
            // 登录数据
            form: {
                username: "admin123",
                password: "admin123"
            },
            // 是否加载
            loading: false,
            // 身份
            value: null,
            // 身份列表
            options: [
            {
                value: 1,
                label: '用户'
            },{
                value: 2,
                label: '医生'
            }, {
                value: 3,
                label: '医院管理员'
            }, {
                value: 4,
                label: '超级管理员'
            }],
        }
    },
    methods: {
        // 登录
        async login() {
            this.loading = true
            let res = await this.$store.dispatch("getLogin", {
                username: this.form.username,
                password: this.form.password,
                identify: this.value
            })
            this.loading = false
            if (res.success) {
                this.$message.success(res.message)
                this.$router.push("/index")
            }
            else this.$message.error(res.message)
        },
    },
}
</script>

<style scoped>
.login-div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background: #f0f2f5;
    background-image: url(image/bg.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
}

.box-card {
    margin-top: 130px;
    width: 364px;
    height: 300px;
}

.title {
    font-size: 26px;
    color: #666;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.input-div .el-input {
    margin: 5px 0 5px 0;
}

.btn-div button {
    margin-top: 5px;
    width: 100%;
}
</style>